<template>
    <div class="library-container">

        <!-- 使用 LibraryCard 组件展示库信息 -->
        <LibraryCard :library="library" class="clickable-card">
            <div>
                <span class="label">是否公开:</span>
                <span class="value">{{ library.isPublic ? '是' : '否' }}</span>
            </div>
            <el-divider border-style="double" />
            <div>
                <el-button v-if="isOk" type="primary" @click="handleEditClick()">添加文章</el-button>
            </div>
        </LibraryCard>

        <!-- 使用 ArticleCard 组件展示每篇文章信息 -->
        <PaginationList :data="articles" title="库内文章" v-model:pageSize="pageSize" v-model:currentPage="currentPage"
            v-model:total="total" @page-change="change">
            <!-- 自定义列表项展示 -->
            <template #default="{ item }">
                <!-- 绑定点击事件 -->
                <ArticleCard :article="item" @click="handleArticleClick(item)" class="clickable-card">
                </ArticleCard>
            </template>
        </PaginationList>
    </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';
// 引入 LibraryCard 和 ArticleCard 组件
import LibraryCard from './LibraryCard.vue';
import ArticleCard from './ArticleCard.vue';
import PaginationList from './PaginationList.vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { onMounted } from 'vue';
import require from '../require';
import { UserStore } from '../store/user';

const userStore = UserStore();
const router = useRouter();
const route = useRoute();

const libraryId = ref(route.query.id);
const isOk = ref(false);

// 页面加载完成后获取数据
onMounted(async () => {
    change(1);
});

const findLibraryById = async (libraryId) => {
    const res = await require.post('user/getHisLibrary', {
        libraryId: libraryId
    });

    const lb = res.library;
    console.log(lb)
    if (lb.creatorUser.userId === userStore.userInfo.userId) {
        isOk.value = true;
    }
    const aLibrary = ref({});
    aLibrary.value = {
        libraryId: lb.libraryId,
        name: lb.libraryName,
        description: lb.description,
        articleCount: lb.articleAmounts,
        createTime: lb.createTime,
        updateTime: lb.updateTime,
        creatorId: lb.creatorId,
        isPublic: lb.isPublic,
        likedAmounts: lb.likedAmounts,
        collectedAmounts: lb.collectedAmounts,
        commentedAmounts: lb.commentedAmounts,
        currentUserCollect: lb.currentUserCollect,
        currentUserLike: lb.currentUserLike,
    }
    return aLibrary.value;
}

const queryArticleInLibrary = async (libraryId, start, size) => {
    const res = await require.post('user/hisArticleInLibrary', {
        libraryId: libraryId,
        start: start,
        size: size,
    })
    const as = res.articleList;
    const articleList = [];
    for (let i = 0; i < as.length; i++) {
        const a = as[i];
        articleList.push({
            title: a.title,
            author: a.author.nickName,
            introduction: "暂无",
            updateTime: a.updateTime,
            authorId: a.author.userId,
            articleId: a.articleId,
            likedAmounts: a.likedAmounts,
            collectedAmounts: a.collectedAmounts,
            commentedAmounts: a.commentedAmounts,
            libraryId: a.libraryId,
            currentUserCollect: a.currentUserCollect,
            currentUserLike: a.currentUserLike,
        })
    }
    return articleList;
}

const change = async (page) => {
    console.log(`当前页码已变更为: ${page}`);
    library.value = await findLibraryById(libraryId.value);
    total.value = library.value.articleCount;
    articles.value = [];
    articles.value = await queryArticleInLibrary(libraryId.value, (page - 1) * pageSize.value, pageSize.value);
}

const pageSize = ref(10);
const total = ref(1);
const currentPage = ref(1);

const library = ref({
    libraryId: 1,
    name: '示例知识库',
    description: '一个示例知识库',
    articleCount: 10,
    createTime: '2025-05-05',
    updateTime: '2025-05-05',
    creatorId: 1,
    isPublic: '是',
    likedAmounts: 0,
    collectedAmounts: 0,
    commentedAmounts: 0,
    currentUserCollect: false,
    currentUserLike: false,
});

const handleEditClick = () => {
    console.log('点击添加文章按钮', library);
    router.push({ name: 'AddArticle', query: { libraryId: library.value.libraryId } });
};


const articles = ref([
    {
        title: '示例文章1',
        author:'111',
        introduction: '这是一篇示例文章',
        updateTime: '2025-05-05',
        creatorId: 1,
        articleId: 1,
        isPublic: true,
        likedAmounts: 0,
        collectedAmounts: 0,
        commentedAmounts: 0,
        isPublic: 1,
    }
]);

const handleArticleClick = (article) => {
    // 生成包含 query 参数的路由对象
    const r = router.resolve({
        name: 'HisArticle', // 文章详情页路由名
        query: {
            articleId: article.articleId, // 文章 ID
        }
    });
    // 在新标签页打开路由链接
    window.open(r.href, '_blank');
};
</script>

<style scoped>
.library-container {
    font-family: Arial, sans-serif;
    padding: 20px;
    border-radius: 8px;
}

.article-list {
    margin-top: 20px;
}

.clickable-card {
    cursor: pointer;
}

.label {
    font-weight: bold;
    margin-right: 10px;
    text-align: right;
    color: #606266;
    margin-top: 10px;
}
</style>
